import { h, render } from 'vue'
import XtxMessage from './XtxMessage.vue'
type Props = {
    type: 'success' | 'error' | 'warning'
    text: string
    duration?: number
}

// (1) 创建一个div容器
const div = document.createElement('div')
// (2) 给div追加一个类名
div.setAttribute('class', 'xtx-message-container')
// (3) 获取 body 的 dom
document.body.appendChild(div)

const Message = function ({ type, text, duration = 3000 }: Props) {
    // (4) 创建一个XtxMessage虚拟dom
    const vNode = h(XtxMessage, { type, text })
    // (5) 把虚拟dom XtxMessage虚拟dom 插入容器里面render(虚拟dom, 真实dom)
    render(vNode, div)
    // 开启延时器
    setTimeout(() => {
        // 删除虚拟DOM
        render(null, div)
    }, duration)
}

// 函数也是对象, 这里相当于给对象添加方法
Message.error = function (text: string, duration = 3000) {
    Message({
        type: 'error',
        text,
        duration,
    })
}
Message.success = function (text: string, duration = 3000) {
    Message({
        type: 'success',
        text,
        duration,
    })
}
Message.warning = function (text: string, duration = 3000) {
    Message({
        type: 'warning',
        text,
        duration,
    })
}
// console.dir(Message)
export default Message